<template>
	<view class="lists">
		<view v-for="item in lists" @click="goDetail(item)" :key="item">
			<view class="list">
				<view class="list1">
					<view class="title">{{ item.title }}</view>
					<view class="two">
						<view class="time">{{ item.time }}</view>
						<view class="name">&nbsp;| {{ item.name }}</view>
					</view>
					<view class="address">{{ item.address }}</view>
					<view class="hot icon-specifications">{{ item.hot }}</view>
				</view>
				<view class="list2">
					<view class="one">
						<svg class="icon" aria-hidden="true"><use :xlink:href="item.hoticon"></use></svg>
						<view class="hotday">{{ item.hotday }}</view>
					</view>
					<view class="one">
						<svg class="icon" aria-hidden="true"><use :xlink:href="item.recoveryicon"></use></svg>
						<view class="recovery">{{ item.recovery }}</view>
					</view>
				</view>
			</view>

			
		</view>
		<uni-fab :pattern="pattern" :content="content" horizontal="right" vertical="bottom" direction="horizontal" :popMenu="true" @trigger="trigger" @fabClick="fabClick" />
	</view>
</template>

<script>
// import  { reactive } from "vue
export default {
	props: ['lists'],
	data() {
		return {
			pattern: {
				color: 'gray',
				backgroundColor: '#FFFFFF',
				selectedColor: '#007AFF',
				buttonColor: '#577FFF'
			},
			content: [
				{
					iconPath: '/static/Group 24.png',
					selectedIconPath: '/static/Group 24.png',
					text: '组件',
					active: false
				},
				{
					iconPath: '/static/Group 24.png',
					selectedIconPath: '/static/Group 24.png',
					text: 'API',
					active: true
				},
				{
					iconPath: '/static/Group 24.png',
					selectedIconPath: '/static/Group 24.png',
					text: '模版',
					active: false
				}
			]
		};
	},
	methods: {
		trigger(e) {
			uni.showModal({
				title: '提示',
				content: `激活状态：${e.item.active};选中项：${e.item.text}`,
				success(res) {
					if (res.confirm) {
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		fabClick() {
			uni.showToast({
				title: '点击了悬浮按钮',
				icon: 'none'
			});
		},
		goDetail(item) {
			let obj = JSON.stringify(item);
			uni.navigateTo({
				url: 'Kehucontext/Kehucontext?obj=' + encodeURIComponent(obj)
			});
			console.log(obj);
		}
	}
};
</script>

<style scoped lang="scss">
	.lists{
		background-color: $uni-text-color-inverse;
	}
// 图表样式
.icon {
	width: 24rpx;
	height: 24rpx;
	fill: blue;
	overflow: hidden;
}
// 列表样式
.list {
	height: 130 * 2rpx;
	display: flex;

	justify-content: space-between;
	padding: 0 16 * 2rpx;
	border-bottom: 1rpx solid #F2F2F7;
	.list1 {
		height: 130 * 2rpx;
		.title {
			font-size: 16 * 2rpx;
			line-height: 16 * 2rpx;
			color: #3c3c3c;
			margin-top: 16 * 2rpx;
		}
		.two {
			font-size: 13*2rpx;
			line-height: 14*2rpx;
			color: #777777;
			display: flex;
			margin-top: 16 * 2rpx;
		}
		.address {
			font-size: 13*2rpx;
			line-height: 14*2rpx;
			color: #777777;
			margin-top: 16 * 2rpx;
		}
		.hot {
			font-size: 13 * 2rpx;
			line-height: 14 * 2rpx;
			color: #777777;
			margin: 16 * 2rpx 0;
		}
	}
	.list2 {
		.one {
			display: flex;
			padding-top: 16 * 2rpx;
			.hotday {
				font-size: 12 * 2rpx;
				line-height: 14 * 2rpx;
				color: #ff4d4f;
			}
			.recovery {
				font-size: 12*2rpx;
				line-height: 14*2rpx;

				color: #27c489;
			}
		}
	}
}
</style>
